import PropTypes from 'prop-types';
import React, {Fragment} from 'react';
import css from './index.less';
import {FEED} from 'utils/feedFunc';

import classImg from 'assert/img/class.png';
import classClose from 'assert/img/classClose.png';
import classBg from 'assert/img/classBg.png';
import classImg1 from 'assert/img/classImg1.png';
import classImg2 from 'assert/img/classImg2.png';
import classImg3 from 'assert/img/classImg3.png';
// import classImg4 from 'assert/img/classImg4.png';
import classWhiteBg from 'assert/img/whiteBg.png';



export default class ClassList extends React.Component {

  static propTypes = {
    itemDetail: PropTypes.array.isRequired,
    getClass: PropTypes.func,
    showInd: PropTypes.number,
  };

  static defaultProps = {

    itemDetail: [
      {
        name: '拖把系列',
        goods: [
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '1111',
          },
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '222',
          },
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '333',
          },
        ],
      },
      {
        name: '清洁工具',
        goods: [
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '1111',
          },
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '222',
          },
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '333',
          },
        ],
      },
      {
        name: '家具收纳',
        goods: [
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '1111',
          },
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '222',
          },
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '333',
          },
        ],
      },
      {
        name: '一次性用品',
        goods: [
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '1111',
          },
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '222',
          },
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '333',
          },
        ],
      },
      {
        name: '卫浴用品',
        goods: [
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '1111',
          },
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '222',
          },
          {
            goodsTaobaoId: '38824121898',
            picUrl: '//img.alicdn.com/imgextra/i4/3355153118/TB2lIH6qgaTBuNjSszfXXXgfpXa-3355153118.png',
            title: '333',
          },
        ],
      },
    ],
    isPage: false,

  };


  constructor(props) {
    super(props);
    this.state = {
      // showClass: props.isPage && true,
      showClass: false,
      selectedInd: props.showInd,
    };
    // console.log('props.itemDetail===', props.itemDetail);
    this.itemDetail = props.itemDetail.slice(0);
    //  props.showInd由两个组件传入，且值与用途不一样
    //  由首页轮播传入时，为轮播的index，用途是改变不同的背景图片，这时只需要使用props，不用state
    //  由page分类页传入时，为分类项的index，用途是切换分类，这时需要用state控制选中状态

  }

  componentDidMount() {

  }

  componentWillUnmount() {

  }


  render() {

    // console.log('selectedInd==', this.state.selectedInd);

    const { showClass, selectedInd } = this.state;
    const { getClass = () => {}, isOpen = () => {},clearId = () => {}, showInd, isPage} = this.props;
    let img1 = classBg;
    if (isPage) img1 = classBg;
    if (showInd === 0 && !isPage) img1 = classImg1;
    if (showInd === 1 && !isPage) img1 = classImg2;
    if (showInd === 2 && !isPage) img1 = classImg3;
    // if (showInd === 3 && !isPage) img1 = classImg4;
    const bgProps = {
      style: {
        right: isPage ? -6 : 0,
        height: (showInd === 3 && !isPage) ? 364 : 350,
      },
      src: img1,
    };

    const openProps = {
      className: css.classImg,
      src: classImg,
      onClick: (e) => {
        e.stopPropagation();
        FEED('');
        this.setState({
          showClass: true,
        }, () => isOpen(showClass));
      },
    };

    const closeProps = {
      className: css.closeImg,
      src: classClose,
      onClick: (e) => {
        e.stopPropagation();
        FEED('');
        this.setState({
          showClass: false,
        }, () => isOpen(showClass));
      },
    };

    return (
      <div>
        {
          !showClass ? <img {...openProps}/> :
            <div className={css.classWrapper} style={{background: `url(${classWhiteBg}) no-repeat`}}>
              <img {...bgProps}/>
              <div className={css.classList}>
                {
                  this.itemDetail.map( (item, index) => {
                    // console.log('item.name', item.name.length);
                    const props = {
                      key: index,
                      className: css.title,
                      style: {
                        backgroundColor: selectedInd === index ? '#FE7171' : '#B6A8B5',
                        width: item.name.length >= 4 ? 200 * item.name.length / 4 : 200,
                      },
                      onClick: (e) => {
                        e.stopPropagation();
                        // FEED('');
                        getClass(index);
                        clearId();
                        this.setState({
                          selectedInd: index,
                        });
                      },
                    };
                    return <div {...props}>{item.name}</div>;
                  })
                }
              </div>
              <img {...closeProps} />
            </div>
        }
      </div>
    );
  }
}
